<script setup lang='ts'>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { snapdom } from '@zumer/snapdom'
import ikunImg from "@/assets/ikun.jpeg";
import base64Img from '@/assets/ikunBase64.js'

const router = useRouter();
const text = ref("");
const textarea = ref("");

const capture = async() => {
    const element = document.querySelector('.target'); // 替换为目标元素的id或class 
    const capture = await snapdom(element, {
        scale: 1, // 缩放比例，默认为1
        backgroundColor:'#fff', // 背景颜色，默认为透明
        embedFonts:true, // 是否嵌入字体，默认为false
    });
    const png = await capture.toPng();
    // const jpg = await capture.toJpg({ quality: 0.9 }); // 可以转为不同格式
    // await capture.download({ // 直接下载
    //     format:'png',
    //     filename:'chart-report-2024'
    // })
    document.querySelector('.preview').appendChild(png)
}


</script>


<template>
    <div class="content">
        <div class="target">
            <el-input class="mb" v-model="text" placeholder="请随意填写表单" /><br>
            <el-input type="textarea" class="mb" v-model="textarea" placeholder="请随意填写文本域" /> <br>
            <span style="vertical-align:top;">图片：</span>
            <el-image style="width: 100px; height: 100px;margin-bottom: 20px;" :src="ikunImg" fit="cover" /><br>
            <span style="vertical-align:top;">base64图片：</span>
            <el-image style="width: 100px; height: 100px;" :src="base64Img" fit="cover" />
        </div>
        <div style="width: 1500px;text-align: center;margin: 20px 0;">
            <el-button @click="capture">截取屏幕</el-button>
            <el-button @click="router.back()">返回</el-button>
        </div>
        <div class="preview">
            
        </div>
    </div>
</template>


<style scoped lang="scss">
.content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.target {
    width: 800px;
    height: 400px;
    background-color: rgb(247, 227, 190);
    padding: 20px;
}

.preview {
    width: 800px;
    height: 400px;
}

.mb {
    width: 300px;
    margin-bottom: 20px;
}
</style>